<div class="row">
    <div class="col">
        <div class="card">
            <h4 class="card-title px-3 pt-3">分类列表</h4>
            <h6 class="card-subtitle px-3">所有一级商品分类</h6>
            <div class="card-body">
                <a class="btn btn-info" data-toggle="modal"
                   data-target="#myModal" href="#">添加二级分类</a>

                <div id="category-list">
                    <table class="table basic-elaboration-tablet-search table-hover table-striped color-table info-table">
                        <thead>
                        <tr>
                            <th>分类编号</th>
                            <th>分类名称</th>
                            <th>父级编号</th>
                            <th>LOGO图标</th>
                            <th>显示顺序</th>
                            <th>相关操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in categories">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.pid}}</td>
                            <td>{{item.logo}}</td>
                            <td>{{item.order}}</td>
                            <td>
                                <!-- <a class="btn btn-info" data-toggle="modal"
                                    data-target="#myModal" href="#">添加二级分类</a>-->
                                <a @click="query(item.id)" class="btn btn-success" href="#" data-toggle="modal"
                                   data-target=".bs-example-modal-lg">查看</a>
                                <a class="btn btn-primary" href="#">编辑</a>
                                <a class="btn btn-danger" href="#">删除</a>
                            </td>

                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>
<!--查询二级分类-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div id="category2-list">
                <table class="table basic-elaboration-tablet-search table-hover table-striped color-table info-table">
                    <thead>
                    <tr>
                        <th>分类编号</th>
                        <th>分类名称</th>
                        <th>父级编号</th>
                        <th>LOGO图标</th>
                        <th>显示顺序</th>
                        <th>相关操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in category2s">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.pid}}</td>
                        <td>{{item.logo}}</td>
                        <td>{{item.order}}</td>
                        <td>
                            <a class="btn btn-primary" href="#">编辑</a>
                            <a class="btn btn-danger" href="#">删除</a>
                        </td>

                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--添加二级分类-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="card">
                <div class="card-title px-3 pt-3">新增分类</div>
                <div class="card-subtitle px-3">添加商品分类</div>
                <div class="card-body">
                    <form id="myform" class="form-material" action="http://localhost:8080/upload" method="post"
                          enctype="multipart/form-data">
                        <div class="form-group">
                            <label>分类名称：</label>
                            <input type="text" name="name" class="form-control" placeholder="请输入分类名称...">
                        </div>

                        <div class="form-group">
                            <label>父级分类：</label>
                            <select name="pid" class="form-control" id="category1-list">
                                <option v-for="item in categories" :value="item.id">{{item.id}} - {{item.name}}</option>
                            </select>
                            <!-- <input type="number" name="order" class="form-control" value="1">-->
                        </div>

                        <div class="form-group">
                            <label>显示顺序：</label>
                            <input type="number" name="order" class="form-control" value="0">
                        </div>

                        <div class="form-group">
                            <label>分类LOGO：</label>
                            <div class="col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <input type="file" name="logo" id="input-file-max-fs" class="dropify"
                                               data-max-file-size="2M"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <button class="btn btn-primary"><i class="fa fa-save"></i> 保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $.getJSON("http://localhost:8080/category", function (dto) {
            new Vue({
                el: "#category-list",
                data: {
                    categories: dto.data,

                }, methods: {
                    query: function (id) {
                        $.getJSON("http://localhost:8080/category/" + id, function (dto) {
                            new Vue({
                                el: "#category2-list",
                                data: {
                                    category2s: dto.data,

                                }
                            })
                        });
                    }
                }
            })
        });

        // 请求接口，获取所有一级分类，并绑定到下拉框中
        $.getJSON("http://localhost:8080/category", function (dto) {
            new Vue({
                el: "#category1-list",
                data: {
                    categories: dto.data
                }
            });
        });
    });

    // 为所有 type="file" 的 input，设置预览
    $(":file").change(function () {
        var targetName = $(this).data("img");

        //使用这个方法来临时创建一个文件的链接，参数是一个file或者blob
        var path = URL.createObjectURL(this.files[0]);

        //将链接赋值给上面的图片src路径
        $(targetName).prop("src", path)
    });

    $("#myform").submit(function () {
        var data = new FormData(this);  // 传递的数据

        $.ajax({
            url: "http://localhost:8080/category",
            data: data,
            type: "POST",
            processData: false,
            contentType: false,
            success: function (dto) {
                //如果成功
                if (dto.code == 1000) {
                    swal({
                        title: "添加成功",
                        type: "success",
                        confirmButtonText: "确定"
                    })
                } else {
                    swal({
                        title: "添加失败",
                        text: dto.msg,
                        type: "error",
                        confirmButtonText: "确定"
                    })
                }
            }
        });

        return false;
    });

    $(document).ready(function () {
        // Basic
        $('.dropify').dropify();

        // Translated
        $('.dropify-fr').dropify({
            messages: {
                default: 'Glissez-déposez un fichier ici ou cliquez',
                replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                remove: 'Supprimer',
                error: 'Désolé, le fichier trop volumineux'
            }
        });

        // Used events
        var drEvent = $('#input-file-events').dropify();

        drEvent.on('dropify.beforeClear', function (event, element) {
            return confirm("你真的想删除吗 \"" + element.file.name + "\" ?");
        });

        drEvent.on('dropify.afterClear', function (event, element) {
            alert('File deleted');
        });

        drEvent.on('dropify.errors', function (event, element) {
            console.log('有错误');
        });

        var drDestroy = $('#input-file-to-destroy').dropify();
        drDestroy = drDestroy.data('dropify')
        $('#toggleDropify').on('click', function (e) {
            e.preventDefault();
            if (drDestroy.isDropified()) {
                drDestroy.destroy();
            } else {
                drDestroy.init();
            }
        })
    });
</script>